<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的收藏</title>
    <script src="Bootstrap/js/jquery-1.11.1.min.js"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <style>
        * {  margin: 0px;  padding: 0px;  font-size: 13px;    list-style: none;   }
        header {  height: 40px;  width: 100%;  background: #20a1a1;  text-align: center;  color: white; line-height: 40px;  z-index: 1;  }
        .product img{width: 75px;height: 75px;border-radius: 10px;margin: 3px 0px 5px 10px}
        .product ul{background-color:#F0F0F0;}
        .product{width: 100%;height: 82px;margin-top: 2px;background-color: white;border-bottom: 4px solid #f8f8ff;}
        .product_title{position: absolute;margin-left: 1%;font-size: 13px;padding: 3px;color: black;margin-top: 4px}
        .product .price{position: absolute;color: red;font-size: 15px;margin-top: 55px;font-weight: bold;margin-left: 3%}
        .delete{float: right;margin-right: 10px;margin-top: 33px;color: red}
    </style>
    <script>
       $(function () {
           var data = {"user.userId":2};
           var url = "http://obao.tunnel.2bdata.com/collect!findUserAll.htm";
           $.post(url,data,function (data) {
               var str="";
               for(var i = 0;i<data.length;i++){
                   var img = "http://obao.tunnel.2bdata.com/upload/product/"+data[i].product.productImg;
                   str+="<a href='info.html?"+data[i].product.productId+"'>";
                   str+="<li class='product'>";
                   str+="<img src='"+img+"'>";
                   str+="<span class='product_title'>"+data[i].product.productName+"</span>";
                   str+="<span class='price'>";
                   str+="<span>￥</span><span class='pric'>"+data[i].product.newPrice+"</span>元</span>";
                   str+="</a>";
                   str+="<span class='delete'>删除</span>";
                   str+="</li>";
               }
               $(".order").html(str);
               $(".delete").on("click",function () {
                   $(this).parents(".product").remove();
               })
           });
       });
    </script>
</head>
<body>
<header class="header">
   <span style="font-weight: bold;font-size: 15px">我的收藏</span>
</header>
<div class="collect">
    <ul class="order" style="margin-bottom: 50px;">
        <!--<li class="product">-->
            <!--<a href='info.html'>-->
                <!--<img src="img/sp1.jpg">-->
                <!--<span class='product_title'>【新品】新疆大盘鸡</span>-->
                <!--<span class='price'>-->
                    <!--<span>￥</span><span class="pric">10</span>元</span>-->
            <!--</a>-->
            <!--<span class='delete'>删除</span>-->
        <!--</li>-->
    </ul>
</div>
</body>
</html>